<script setup>
import { ref, onMounted } from 'vue'
import { getLeavewordListAPI, deleteLeavewordAPI } from '@/api/leaveword'
import { getLabelListAPI } from '@/api/label'
import { useCommonStore } from '@/stores'
import { ElMessage } from 'element-plus'
import { utils, writeFileXLSX } from 'xlsx'
import { useInitTable } from '@/hooks/useTable'
import LeavewordDetail from './components/LeavewordDetail.vue'
const commonStore = useCommonStore()

// 处理响应结果
const handleSuccess = (result) => {
  tableData.value = result.rows.map((item) => {
    item.btnLoading = false
    return item
  })
  total.value = result.count
}
// 列表 | 分页 | 搜索 | 多选 | 删除
const tableOptions = {
  params: {
    page: 1,
    pageSize: 10,
    id: null,
    content: null,
    name: null,
    wall_id: 0,
    label_id: 0
  },
  getDataAPI: getLeavewordListAPI,
  deleteAPI: deleteLeavewordAPI,
  onSuccess: handleSuccess
}
const {
  params,
  tableData,
  tableLoading,
  total,
  multiSelection,
  getData,
  handleSearch,
  handleSelectionChange,
  handleBatchDelete,
  handleDelete,
  handleIndex
} = useInitTable(tableOptions)

// 获取标签列表
const labelList = ref([])
const getLabelList = async (id) => {
  labelList.value = await getLabelListAPI({ wall_id: id })
}
// 墙类型修改
const handleWallChange = (id) => {
  labelList.value = []
  params.label_id = 0
  if (id !== 0) getLabelList(id)
}

// 查看详情
const showDrawer = ref(false)
const leavewordDetail = ref({})
const handleDetail = (row) => {
  leavewordDetail.value = row
  showDrawer.value = true
}

// 导出excel
const handleExport = async () => {
  if (multiSelection.value.length === 0) return ElMessage.error('请先选择留言')
  const tableHeader = ['id', 'name', 'content', 'like_count', 'comment_count', 'created_time']
  // 处理数据
  const sheetData = multiSelection.value.map((item) => {
    const _obj = {}
    tableHeader.forEach((key) => {
      _obj[key] = item[key]
    })
    return _obj
  })
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(sheetData)
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [['id', '签名', '内容', '喜欢个数', '评论个数', '创建时间']], {
    origin: 'A1'
  })
  writeFileXLSX(workbook, 'LeavewordList.xlsx')
}

onMounted(() => {
  commonStore.getWallList()
})
</script>

<template>
  <layout-card>
    <!-- 搜索区域 -->
    <el-form class="search-container" :model="params" inline>
      <el-form-item label="留言id:">
        <el-input v-model="params.id" placeholder="请输入id" style="width: 90px" clearable />
      </el-form-item>
      <el-form-item label="留言内容:">
        <el-input
          v-model="params.content"
          placeholder="请输入内容"
          style="width: 150px"
          clearable
        />
      </el-form-item>
      <el-form-item label="签名:">
        <el-input v-model="params.name" placeholder="请输入签名" style="width: 150px" clearable />
      </el-form-item>
      <el-form-item label="墙的类型:">
        <el-select
          class="select"
          v-model="params.wall_id"
          placeholder="选择墙的类型"
          @change="handleWallChange"
        >
          <el-option label="全部" :value="0" />
          <el-option
            v-for="item in commonStore.wallList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签:">
        <el-select class="select" v-model="params.label_id" placeholder="选择墙的类型">
          <el-option label="全部" :value="0" />
          <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary" @click="handleSearch" icon="Search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <div class="handle-container">
      <el-button type="primary" @click="handleExport">导出Excel</el-button>
      <el-button v-permission="'leaveword:list:deleteLeaveword'" @click="handleBatchDelete"
        >批量删除</el-button
      >
    </div>
    <!-- 表格区域 -->
    <el-table v-loading="tableLoading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" :index="handleIndex" />
      <el-table-column label="签名" prop="name" show-overflow-tooltip />
      <el-table-column label="留言内容" prop="content" show-overflow-tooltip />
      <el-table-column label="墙的类型">
        <template #default="{ row }">
          <el-tag :type="row.wall.title === '留言墙' ? 'success' : 'primary'" effect="plain">{{
            row.wall.title
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template #default="{ row }">{{ row.label.name }}</template>
      </el-table-column>
      <el-table-column label="喜欢个数" prop="like_count" />
      <el-table-column label="评论个数" prop="comment_count" />
      <el-table-column label="留言时间" prop="created_time" width="180" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
          <el-popconfirm title="确定要删除此条留言吗？" @confirm="handleDelete(row)">
            <template #reference>
              <el-button
                v-permission="'leaveword:list:deleteLeaveword'"
                :loading="row.btnLoading"
                type="primary"
                link
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.pageSize"
        :page-sizes="[10, 50, 80, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSearch"
        @current-change="getData"
      />
    </div>
    <!-- 查看详情 -->
    <el-drawer v-model="showDrawer" title="留言详情" size="40%">
      <leaveword-detail :leaveword="leavewordDetail" />
    </el-drawer>
  </layout-card>
</template>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
  .select {
    width: 130px;
  }
  &.search-btn {
    margin-right: 0;
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: end;
}
</style>
